<template>
  <div>
    <!-- 添加 -->
    <div class="add">
      <el-space>
        <label>角色名称：</label>
        <el-input v-model.trim="roles.rolename" />
        <label>描述信息：</label>
        <el-input v-model.trim="roles.describe" />
      </el-space>
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>

    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" v-bind:title="title" width="30%" :before-close="handleClose">
      <!-- 修改信息 -->
      <div class="amend" v-if="title == '修改信息'">
        <div>
          <span>角色名称：</span>
          <el-input v-model="revamp.name" />
        </div>
        <div>
          <span>描述信息：</span>
          <el-input v-model="revamp.desc" />
        </div>
      </div>
      <!-- 授权 -->
      <div class="accredit" v-else>
        <el-tree
          :data="jurisdiction"
          show-checkbox
          node-key="id"
          :default-checked-keys="selectKeys"
          :props="defaultProps"
          ref="tree"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="title == '修改信息' ? handleAmends() : handleAllocation()"
          >{{ title == "修改信息" ? "修改" : "确认" }}</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="desc" label="说明" />
      <el-table-column prop="status" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleAmend(scope.row)">修改</el-button>
          <el-button type="primary" @click="handleAccredit(scope.row)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
  </div>
</template>

<script>
import { post } from "@/utlis/http";
import paGing from "@/components/PaGing.vue";
export default {
  components: {
    paGing,
  },
  data() {
    return {
      tableData: [], //表格数据
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10,
      },
      //添加角色
      roles: {
        rolename: "",
        describe: "",
      },
      //修改角色
      revamp: {
        id: 0,
        name: "",
        desc: "",
      },
      dialogVisible: false, //对话框
      title: "修改信息", //判断是修改还是配置权限
      jurisdiction: [], //权限配置
      defaultProps: {
        children: "children",
        label: "label",
      },
      roleId: "", //配置权限id
      selectKeys: [], //选中的id，选中的key
    };
  },
  created() {
    this.initiaLize();
  },
  methods: {
    //渲染表格
    initiaLize() {
      let data = {
        _gp: "admin.role",
        _mt: "list",
        page: this.pages.page,
        limit: this.pages.limit,
      };
      post(data)
        .then((res) => {
          let { data, errno } = res.data;
          if (200 == errno) {
            this.tableData = data.items;
            this.pages.total = data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    // 添加
    handleAdd() {
      if (this.roles.rolename == "") {
        ElMessage.warning("角色名称不能为空");
        return;
      }
      if (this.roles.describe == "") {
        ElMessage.warning("描述信息不能为空");
        return;
      }
      let data = {
        _gp: "admin.role",
        _mt: "create",
        role: JSON.stringify({
          name: this.roles.rolename,
          desc: this.roles.describe,
        }),
      };
      post(data)
        .then((res) => {
          let { errno } = res.data;
          if (200 == errno) {
            ElMessage.success("添加成功");
            this.initiaLize();
            this.roles = {};
          } else if (10000 == errno) {
            ElMessage.warning("该角色名称已存在");
            this.roles.rolename = "";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改
    handleAmend(row) {
      this.title = "修改信息";
      this.dialogVisible = true;
      Object.assign(this.revamp, row);
    },
    //修改
    handleAmends() {
      let data = {
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.revamp),
      };
      post(data).then((res) => {
        let { errno } = res.data;
        if (200 == errno) {
          if (this.revamp.name.trim() == "") {
            ElMessage.warning("角色名称不能为空");
            return;
          }
          if (this.revamp.desc.trim() == "") {
            ElMessage.warning("描述信息不能为空");
            return;
          }
          ElMessageBox.confirm("确定修改?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              ElMessage.success("修改成功");
              this.dialogVisible = false;
              this.initiaLize();
            })
            .catch(() => {
              ElMessage.info("已取消修改");
            });
        }
      });
    },
    //权限配置
    handleAccredit(row) {
      this.roleId = row.id;
      this.title = "权限配置";
      this.selectKeys = [];
      setTimeout(() => {
        this.dialogVisible = true;
      }, 300);
      let data = {
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: row.id,
      };
      post(data)
        .then((res) => {
          let { data, errno } = res.data;
          if (200 == errno) {
            this.jurisdiction = data.systemPermissions;
            this.selectKeys = data.assignedPermissions; //默认选中的key
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //配置权限
    handleAllocation() {
      let rule_id = this.$refs.tree.getCheckedKeys(true); //若节点可用被选中它将返回当前选中节点 key 的数组
      let data = {
        _gp: "admin.role",
        _mt: "permissionSet",
        roleSetPermissionDTO: JSON.stringify({
          roleId: this.roleId,
          permissions: rule_id,
        }),
      };
      post(data).then((res) => {
        let { errno } = res.data;
        if (200 == errno) {
          ElMessage.success("配置成功");
          this.dialogVisible = false;
          this.initiaLize();
        }
      });
    },
    //对话框关闭
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  display: flex;
  align-items: center;
  font-size: 15px;
  .el-input {
    width: 200px;
  }
  .el-button {
    margin-left: 10px;
  }
}
.el-table {
  margin: 20px 0px 40px 0px;
}
.amend {
  margin: auto;
  div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    line-height: 30px;
  }
  .el-input {
    width: 200px;
  }
}
.el-dialog__body {
  margin: auto;
}
</style>
